import { defineComponent, h, computed } from 'vue';

type TColorProp = string | string[];

interface ShineBorderProps {
  borderRadius?: number;
  borderWidth?: number;
  duration?: number;
  color?: TColorProp;
  className?: string;
  children: any; // Vue slots can be used to pass children
}

export default defineComponent({
  name: 'ShineBorder',
  props: {
    borderRadius: { type: Number, default: 8 },
    borderWidth: { type: Number, default: 1 },
    duration: { type: Number, default: 14 },
    color: { type: [String, Array], default: '#000000' },
    className: { type: String, default: '' },
    children: { type: [String, Object], default: null },
  },
  setup(props: ShineBorderProps) {
    const borderRadius = computed(() => `${props.borderRadius}px`);
    const borderWidth = computed(() => `${props.borderWidth}px`);
    const duration = computed(() => `${props.duration}s`);
    const backgroundGradient = computed(() => {
      return Array.isArray(props.color)
        ? `radial-gradient(transparent,transparent, ${props.color.join(
            ','
          )},transparent,transparent)`
        : `radial-gradient(transparent,transparent, ${props.color},transparent,transparent)`;
    });

    const maskLinearGradient = computed(() => `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`);

    return {
      borderRadius,
      borderWidth,
      duration,
      backgroundGradient,
      maskLinearGradient,
    };
  },
  render() {
    return (
      <div
        style={{ '--border-radius': this.borderRadius }}
        class={[
          'relative min-h-[60px] w-fit min-w-[250px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white',
          this.className,
        ]}
      >
        <div
          style={{
            '--border-width': this.borderWidth,
            '--border-radius': this.borderRadius,
            '--duration': this.duration,
            '--mask-linear-gradient': this.maskLinearGradient,
            '--background-radial-gradient': this.backgroundGradient,
          }}
          class={[
            'pointer-events-none before:bg-shine-size before:absolute before:inset-0 before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-shine',
          ]}
        ></div>
        {this.$slots.default && this.$slots.default()}
      </div>
    );
  },
});
